import React, { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';

interface SidebarProps {
  isOpen: boolean;
  onToggle: () => void;
}

// 博物院和文物数据
const museumDataOriginal = [
  {
    id: 'nanjing',
    name: '南京博物院',
    icon: 'fa-university',
    artifacts: [
      { path: '/', name: '透雕人鸟兽玉饰件', icon: 'fa-gem' },
      { path: '/jade-cong', name: '人面兽面组合纹玉琮', icon: 'fa-cube' },
      { path: '/bronze-hu', name: '战国错金银重络铜壶', icon: 'fa-flask' },
      { path: '/gold-beast', name: '金兽', icon: 'fa-dragon' },
      { path: '/silver-jade-suit', name: '银缕玉衣', icon: 'fa-user-tie' },
      { path: '/gold-seal', name: '广陵王玺金印', icon: 'fa-stamp' },
      { path: '/silver-inlaid-ox-lamp', name: '错银铜牛灯', icon: 'fa-lightbulb' },
      { path: '/gilded-beast-box-inkstone', name: '鎏金镶嵌兽形铜盒砚', icon: 'fa-pen-fancy' },
      { path: '/celadon-divine-beast-zun', name: '青瓷神兽尊', icon: 'fa-vase' },
      { path: '/bamboo-grove-sages-brick-painting', name: '竹林七贤与荣启期砖画', icon: 'fa-palette' },
      { path: '/glazed-red-plum-vase', name: '釉里红岁寒三友纹梅瓶', icon: 'fa-vase' },
      { path: '/golden-cicada-jade-leaf', name: '金蝉玉叶', icon: 'fa-bug' },
      { path: '/gold-guanyin', name: '金观音菩萨立像', icon: 'fa-hands-praying' },
      { path: '/gilded-lama-pagoda', name: '鎏金喇嘛塔', icon: 'fa-tower' },
      { path: '/blue-and-white-incense-burner', name: '青花寿山福海纹炉', icon: 'fa-fire-alt' },
      { path: '/miscellaneous-flowers-scroll', name: '徐渭《杂花图卷》', icon: 'fa-palette' },
      { path: '/world-map', name: '利玛窦《坤舆万国全图》', icon: 'fa-globe' },
      { path: '/jesus-embroidery', name: '沈寿绣品《耶稣像》', icon: 'fa-thread' },
    ]
  },
  {
    id: 'henan',
    name: '河南博物院',
    icon: 'fa-building-columns',
    artifacts: [
      { path: '/jiahu-bone-flute', name: '贾湖骨笛', icon: 'fa-music' },
      { path: '/duling-square-ding', name: '杜岭方鼎', icon: 'fa-landmark' },
      { path: '/fu-hao-owl-zun', name: '妇好鸮尊', icon: 'fa-owl' },
      { path: '/jade-handled-iron-sword', name: '玉柄铁剑', icon: 'fa-sword' },
      { path: '/lotus-and-crane-square-hu', name: '莲鹤方壶', icon: 'fa-vase' },
      { path: '/four-gods-cloud-pattern-painting', name: '四神云气图', icon: 'fa-palette' },
      { path: '/wu-zetian-golden-slip', name: '武则天金简', icon: 'fa-scroll' },
      { path: '/ru-kiln-sky-blue-glaze-vase', name: '汝官窑天蓝釉刻花鹅颈瓶', icon: 'fa-vase' },
      { path: '/cloud-pattern-bronze-jin', name: '云纹铜禁', icon: 'fa-cube' },
    ]
  },
  {
    id: 'luoyang',
    name: '洛阳博物馆',
    icon: 'fa-landmark',
    artifacts: [
      { path: '/ru-ding-wen-tong-jue', name: '乳钉纹铜爵', icon: 'fa-wine-glass-alt' },
      { path: '/cao-wei-bai-yu-bei', name: '曹魏白玉杯', icon: 'fa-glass-martini' },
      { path: '/san-cai-hei-you-ma', name: '三彩黑釉马', icon: 'fa-horse' },
      { path: '/dong-han-shi-bi-xie', name: '东汉石辟邪', icon: 'fa-shield-alt' },
      { path: '/jin-si-nan-mu-ta', name: '金丝楠木塔', icon: 'fa-cubes' },
      { path: '/xi-zhou-shou-mian-wen-tong-fang-ding', name: '西周兽面纹铜方鼎', icon: 'fa-cauldron' },
      { path: '/bei-wei-ni-su-fo-mian-xiang', name: '北魏泥塑佛面像', icon: 'fa-face-smile' },
      { path: '/xiang-qian-lv-song-shi-tong-pai-shi', name: '镶嵌绿松石铜牌饰', icon: 'fa-gem' }
    ]
  }
];

export const museumData = museumDataOriginal;

export default function Sidebar({ isOpen, onToggle }: SidebarProps) {
const [expandedMuseums, setExpandedMuseums] = useState<string[]>([]);
  const navigate = useNavigate();

  // 切换博物院展开/折叠状态并导航到南京博物院封面
  const toggleMuseum = (museumId: string) => {
    setExpandedMuseums(prev => 
      prev.includes(museumId)
        ? prev.filter(id => id !== museumId)
        : [...prev, museumId]
    );
    
          // 根据博物馆ID导航到对应的封面页面
          if (museumId === 'nanjing') {
            navigate('/xiaohongshu-cover');
          } else if (museumId === 'henan') {
            navigate('/henan-museum-cover');
          } else if (museumId === 'luoyang') {
            navigate('/luoyang-museum-cover');
          }
  };

  // 检查博物院是否展开
  const isMuseumExpanded = (museumId: string) => expandedMuseums.includes(museumId);

  return (
    <aside className={cn(
      "fixed h-full bg-gray-50 border-r border-gray-200 transition-all duration-300 z-10 print:hidden",
      isOpen ? "w-64" : "w-16"
    )}>
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <h2 className={cn("font-bold text-gray-800", !isOpen && "hidden")}>
          文物展示
        </h2>
        <button 
          onClick={onToggle}
          className="p-2 rounded-full hover:bg-gray-200 transition-colors"
          aria-label={isOpen ? "关闭侧边栏" : "打开侧边栏"}
        >
          <i className={`fas ${isOpen ? "fa-chevron-left" : "fa-chevron-right"}`}></i>
        </button>
      </div>
      
      <nav className="mt-4">
        <ul className="space-y-1">
          {museumData.map(museum => (
            <li key={museum.id} className="group relative">
              {/* 博物院一级菜单 */}
              <button
                onClick={() => toggleMuseum(museum.id)}
                className="flex items-center justify-between w-full px-4 py-3 text-sm rounded-r-full transition-colors text-gray-600 hover:bg-gray-200"
              >
                <div className="flex items-center">
                  <i className={`fas ${museum.icon} w-5 text-center mr-3`}></i>
                  {isOpen && <span>{museum.name}</span>}
                </div>
                {isOpen && (
                  <i className={`fas ${isMuseumExpanded(museum.id) ? "fa-chevron-down" : "fa-chevron-right"} text-xs transition-transform`}></i>
                )}
              </button>
              
              {/* 文物二级菜单 */}
             <ul className={`absolute left-0 top-full w-full pl-8 transition-all duration-300 z-10 bg-white border border-gray-200 shadow-lg ${
    isMuseumExpanded(museum.id) ? "max-h-[calc(100vh-10rem)] opacity-100" : "max-h-0 opacity-0 overflow-hidden"
  }`}>
                {museum.artifacts.map(artifact => (
                  <li key={artifact.path} className="py-1">
                    <NavLink
                      to={artifact.path}
                      className={({ isActive }) => cn(
                        "flex items-center px-4 py-2 text-sm rounded-r-full transition-colors",
                        isActive 
                          ? "bg-teal-50 text-teal-700 font-medium" 
                          : "text-gray-600 hover:bg-gray-200"
                      )}
                    >
                      <i className={`fas ${artifact.icon} w-5 text-center mr-3`}></i>
                      {isOpen && <span>{artifact.name}</span>}
                    </NavLink>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  );
}